<script setup lang="ts">

import {Expand, Fold} from "@element-plus/icons-vue";
import SvgIcon from "../utils/SvgIcon.vue";
import {storeToRefs} from "pinia";
import {userStore} from "../../store";
import { invoke } from "@tauri-apps/api/core";

const store = userStore()
const {mode, expand, full} = storeToRefs(store)


const changeMode = () => {
    store.mode = !store.mode
    document.getElementsByTagName('html')[0].className = store.mode ? 'light' : 'dark'
}
const changeFull = () => {
    store.full = !store.full
    invoke('fullscreen')
}
const changeExpand = () => {
    store.expand = !store.expand
}

</script>

<template>
    <el-row :gutter="5" style="width: 100%;">
        <el-col :span="3" style="text-align: start">
            <el-button class="bnt" @click="changeExpand">
                <el-icon :size="18" v-if="expand">
                    <Expand/>
                </el-icon>
                <el-icon :size="18" v-else>
                    <Fold/>
                </el-icon>
            </el-button>
        </el-col>
        <el-col :span="21" style="text-align: end">
            <el-button class="bnt" @click="changeFull">
                <el-icon :size="20" v-if="full">
                    <svg-icon name="cancelScreen" width="25px" height="25px"/>
                </el-icon>
                <el-icon :size="20" v-else>
                    <svg-icon name="fullScreen" width="25px" height="25px"/>
                </el-icon>
            </el-button>
            <el-button class="bnt" @click="changeMode">
                <el-icon :size="20" v-if="mode">
                    <svg-icon name="sun" width="25px" height="25px"/>
                </el-icon>
                <el-icon :size="20" v-else>
                    <svg-icon name="moon" width="25px" height="25px"/>
                </el-icon>
            </el-button>

        </el-col>
    </el-row>
</template>

<style scoped>
.bnt {
    border: none;
}

.bnt:hover {
    border: none;
}

.bnt:not(:hover) {
    border: none;
}

.bnt:focus {
    outline: none;
}


</style>